<template>
  <div class="home" >
    <template>
      <el-backtop target=".home"
                  :visibility-height="100"></el-backtop>
    </template>
    <TabBar></TabBar>
    <HomeMain style="margin-top: 50px;text-align: center"></HomeMain>

<!--    <router-view></router-view>-->
<!--    <h1>This is a Home page</h1>-->
<!--    <h2>当前登录用户{{this.$store.state.zrUser}}{{  this.$store.state.loginStatus}}}</h2>-->
  </div>
</template>

<script>
// @ is an alias to /src

import TabBar from "../components/tabbar/TabBar";
import HomeMain from "../components/homemain/HomeMain";
export default {
  name: 'Home',
  data(){
      return{
        backgroundImg:require('assets/img/background-bilibili.png')
      }
  },
  components: {
    TabBar,
    HomeMain
  },
  methods:{
    openNotification(){
      this.$message({
        message:"欢迎回到知然",
        type: "success"
      })
    },
    openEditArticle(){
      this.$router.push('/edit-article')
    }
  },

}
</script>

<style scoped>
  .home{
    /*background-color: #8BC6EC;*/
    /*background-image: -webkit-linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);*/
    /*background-image: -moz-linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);*/
    /*background-image: -o-linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);*/
    /*background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);*/

    /*top: 0;*/
    /*left: 0;*/
    /*width: 100vw;*/
    /*height: 100vh;*/

    /*background: url("~assets/img/background-bilibili.png") center;*/
    /*background-size: cover;*/
    /*margin: 0;*/
    /*padding: 0;*/

    height: fit-content;
    overflow: auto;
    text-align: center
  }

  .box-shadow{
    position: absolute;
    right: 60px;
    bottom: 60px;
  }
  #float-btn{

  }
  #float-btn:hover{
    box-shadow: rgba(9, 30, 66, 0.25) 0 3px 5px -2px, rgba(9, 30, 66, 0.08) 0 0 0 1px;
  }
</style>
